<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      .container{
        width: 1000px;
        height: 1000px;
        margin: 0 auto;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: #92022c;
        /*transition: all 3ms ease-in;*/
        /*transition: width 3ms ease-in, height 2ms ease-out;*/
        transition: width 3ms ease-in, height 2ms ease-out,transform 1s ease-in, height 2s ease-out;
      }

      .box:hover{
        width: 300px;
        height: 300px;
        transform: rotate(30deg) ;
      }

    </style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

<!--
6.过渡动画
  1)常规用法:
    transition-property
    transition-duration
    transition-timing-function
    transition-delay
  2) 简洁(复合)用法:
    transition: property-name-list/all duration timing-function delay:

    a) property 可以使用的属性：
      i)颜色:
        color background-color border-color outline-color
      ii)位置:
        background-position left right top bottom
      iii)长度:
        max-height min-height max-width min-width height width
        border-width margin padding outline-width outline-offset
        font-size line-height text-indent vertical-align
        border-spacing letter-spacing word-spacing
      iv)数字:
        opacity visibility z-index font-weight zoom
      v)组合:
        text-shadow transform box-shadow clip
      vi)其它
          渐变
     b)duration :动画持续的时间，一般以秒或者毫秒为单位

     c)timing-function:动画函数
        i)linear:匀速
        ii)ease:变速(先慢后快，最后再慢)
        iii)ease-in:变速(由慢到快)
        iv)ease-out:变速(由快到慢)
        v)ease-in-out:变速(慢速开始，慢速结束)
        vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1中间
     d)delay:动画延时时间，一般以秒或者毫秒为单位


-->

</body>
</html>